<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="style/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="style/style.css">
    <script src="js/zepto.min.js"></script>
</head>

<body>

    <div class="wraper">
        <!--头部-->
        <header class="header">
            <h1 class="hd_logo"><a href="###">爱拍原创</a></h1>
            <div class="hd_right">
                <a class="r_search" href="###">搜索</a>
                <a class="r_user" href="###">用户</a>
            </div>
        </header>
        <!--滑动导航-->
        <nav class="nav_top">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="###">热门</a></div>
                <div class="swiper-slide cur"><a href="###">穿越火线</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">我的世界</a></div>
                <div class="swiper-slide"><a href="###">英雄联盟</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
                <div class="swiper-slide"><a href="###">我的世界</a></div>
                <div class="swiper-slide"><a href="###">英雄联盟</a></div>
                <div class="swiper-slide"><a href="###">王者荣耀</a></div>
            </div>
        </nav>
        <div class="wrapin">
            <!--焦点图-->
            <section class="mod_focus">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                    <li class="swiper-slide">
                        <a href="###"><img src="images/pic/img1.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
            </section>
            <!--爱拍热点-->    
            <section class="mod_how">
                <div class="how_ico"><img src="images/how.png" alt=""></div>
                <div class="how_list">
                    <ul>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <p class="title">
                                    <span class="tag"><img src="images/pic/hd.png" alt=""></span>
                                    <span class="info">玩单机游戏谁比他厉害？</span>
                                </p>
                                <p class="txt">每周战报结果公布，你的偶像在里面吗？</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </section>
            <!--精彩推荐-->
            <section class="mod_list">
                <div class="mod_hd">
                    <div class="hd_left"><span class="ico"></span><span class="title">穿越火线</span></div>
                    <div class="hd_right"><span class="replace">换一批</span></div>
                </div>
                <div class="mod_bd">
                    <ul>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                    </ul>
                </div>
                <div class="mod_ft"><a href="###" class="more"><span>更多精彩视频</span></a></div>
            </section>

            <section class="mod_list">
                <div class="mod_hd">
                    <div class="hd_left"><span class="ico"></span><span class="title">英雄联盟</span></div>
                    <div class="hd_right"><span class="replace">换一批</span></div>
                </div>
                <div class="mod_bd">
                    <ul>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                    </ul>
                </div>
                <div class="mod_ft"><a href="###" class="more"><span>更多精彩视频</span></a></div>
            </section>

            <section class="mod_list">
                <div class="mod_hd">
                    <div class="hd_left"><span class="ico"></span><span class="title">王者农药</span></div>
                    <div class="hd_right"><span class="replace">换一批</span></div>
                </div>
                <div class="mod_bd">
                    <ul>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                        <li>
                            <div class="con">
                                <a href="###" class="pic"><img src="images/pic/img2.jpg" alt=""></a>
                                <a href="###" class="user_img"> <img src="images/pic/big.jpg"></a>
                                <div class="user_info">
                                    <div class="left cell"> <span class="user_ico"></span> <a href="###" class="name">Fawcus-霜冷</a> </div>
                                    <div class="right cell">
                                        <span class="play_num">5.2万</span> <span class="play_ico"></span> </div>
                                </div>
                            </div>
                            <p class="title">黑科技刷上最高分的秘籍！五星开始速度炼成！</p>
                        </li>
                    </ul>
                </div>
                <div class="mod_ft"><a href="###" class="more"><span>更多精彩视频</span></a></div>
            </section>
        </div>
    </div>
    <script src="js/swiper-3.4.2.jquery.min.js"></script>
    <script src="js/commen.js"></script>
</body>

</html>